<template>
  <div class="menu-list" :style="containerStyle">
    <!-- 无菜单 -->
    <div v-if="!data.menuList || !data.menuList.length" class="empty-container">
      <el-empty description="暂无菜单" />
    </div>

    <!-- 菜单列表 -->
    <div
      v-else
      class="menu-list-container"
    >
      <div
        v-for="(menu, index) in data.menuList"
        :key="index"
        class="menu-item"
        :style="itemStyle"
      >
        <div class="menu-icon-container">
          <img
            v-if="menu.image"
            :src="menu.image"
            :alt="menu.text"
            class="menu-image"
          />
          <el-icon
            v-else
            :size="data.iconSize || 24"
            :style="{ color: data.iconColor || '#333333' }"
          >
            <component :is="getIconComponent(menu.icon)" />
          </el-icon>
        </div>

        <div 
          class="menu-text"
          :style="textStyle"
        >{{ menu.text }}</div>

        <div class="menu-arrow" v-if="data.showArrow">
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { 
  Picture, 
  ShoppingCart, 
  User, 
  Setting, 
  Star, 
  Bell,
  Location,
  Phone
} from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 图标映射
const iconMap = {
  'picture': Picture,
  'shopping-cart': ShoppingCart,
  'user': User,
  'setting': Setting,
  'star': Star,
  'bell': Bell,
  'location': Location,
  'phone': Phone
}

// 获取图标组件
function getIconComponent(iconName) {
  return iconMap[iconName] || Picture
}

// 计算容器样式
const containerStyle = computed(() => {
  return {
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`,
    backgroundColor: props.data.backgroundColor || '#ffffff'
  }
})

// 计算菜单项样式
const itemStyle = computed(() => {
  return {
    display: 'flex',
    alignItems: 'center',
    padding: `${props.data.padding || 10}px`,
    borderBottom: props.data.showBorder ? `1px solid ${props.data.borderColor || '#e4e7ed'}` : 'none',
    borderRadius: props.data.borderRadius ? `${props.data.borderRadius}px` : '0'
  }
})

// 计算文本样式
const textStyle = computed(() => {
  return {
    fontSize: `${props.data.textSize || 14}px`,
    color: props.data.textColor || '#333333',
    marginLeft: '10px',
    flex: 1
  }
})
</script>

<style lang="scss" scoped>
.menu-list {
  width: 100%;

  .empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
  }

  .menu-list-container {
    width: 100%;

    .menu-item {
      transition: background-color 0.3s;
      cursor: pointer;

      &:hover {
        background-color: #f5f7fa;
      }

      &:last-child {
        border-bottom: none;
      }

      .menu-icon-container {
        display: flex;
        justify-content: center;
        align-items: center;

        .menu-image {
          width: 24px;
          height: 24px;
          object-fit: cover;
          border-radius: 50%;
        }
      }

      .menu-text {
        text-align: left;
      }

      .menu-arrow {
        color: #c0c4cc;
      }
    }
  }
}
</style>
